<template>
  <div>

    <div style="margin: auto;">
      <el-tabs  type="border-card">
        <el-tab-pane  label="订单管理"  >
          <el-table
              :data="orderList.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              border
              style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
            <el-table-column fixed prop="lineName" label="线路名称" width="150"></el-table-column>
            <el-table-column fixed prop="name" label="用户名称" width="150"></el-table-column>
            <el-table-column fixed prop="tel" label="电话号码" width="150"></el-table-column>
            <el-table-column fixed prop="orderDate" label="订单时间" width="150"></el-table-column>
            <el-table-column fixed prop="count" label="价格" width="150"></el-table-column>
            <el-table-column fixed label="操作" width="150">
              <template #default="scope">
                <el-button
                    size="mini"
                    type="danger"
                    @click="delOrder( scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="orderList.length" s>
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="用户管理">
          <div style="text-align: left;margin: 5px 0">
            <el-input
                placeholder="请输入内容"
                v-model="user.name"
                clearable
                style="width: 300px" class="order-input">
            </el-input>
            <el-button type="primary" plain @click="getUser">主要按钮</el-button>
          </div>
          <el-table
              :data="customer.slice((currentPage-1)*PageSize,currentPage*PageSize)"
              border
              style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
            <el-table-column fixed prop="name" label="用户名称" width="150"></el-table-column>
            <el-table-column fixed prop="account" label="用户账号" width="150"></el-table-column>
            <el-table-column fixed prop="tel" label="电话号码" width="150"></el-table-column>
            <el-table-column fixed prop="gender" label="用户性别" width="150"></el-table-column>
            <el-table-column fixed label="操作" width="150">
              <template #default="scope">
                <el-button
                    size="mini"
                    type="danger"
                    @click="delUser( scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="customer.length" s>
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "adminOrder",
  data(){
    return{
      orderList:[],
      // 默认显示第几页
      currentPage:1,
      // 默认每页显示的条数
      PageSize:10,
      user:{},
      customer:[]
    }
  },
  created() {
    // this.getOrder();
    this.getUser()
  },
  methods:{
    getOrder:function (){
      this.$axios.get("/api/admin/order").then(res => {
        this.orderList=res.data
        console.log(res)
      })
    } ,
    delOrder:function (val){
      this.$axios.delete("/api/admin/order/"+ val.odID).then(res =>{
        this.$message.warning(res.data.msg);
        location.reload();
      })
    },
    getUser:function (){
      this.$axios.post("/api/admin/customer",this.user).then(res => {
        console.log(res)
        this.customer =res.data
      })
    },
    delUser:function (val){
      this.$axios.delete("/api/admin/customer/"+ val.customerID).then(res =>{
        this.$message.warning(res.data.msg);
        location.reload();
      })
    },
    // 分页
// 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
// 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
    },
  }
}
</script>
<style>
.el-table .el-table__fixed{
  height: 100% !important;
}
.order-input{
  height: 40px;
}
</style>
<style scoped>

</style>